/*! 水平flex */
.flex-row {
  display: flex;
  flex-direction: row;
}
/*! 水平flex，垂直居中 */
.flex-row-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}
/*! 水平flex，带间隔 */
.flex-row-gap {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.flex-row-gap-l {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

/*! 垂直flex */
.flex-col {
  display: flex;
  flex-direction: column;
}

/*! 垂直flex，水平居中 */
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*! 垂直flex，带间隔 */
.flex-col-gap {
  display: flex;
  flex-direction: column;
  gap: 8px
}
.flex-col-gap-l {
  display: flex;
  flex-direction: column;
  gap: 16px
}

/*! 垂直flex，可滚动 */
.flex-col-scroll {
  display: flex;
  flex-direction: column;
  overflow: auto;

  &>* {
    flex-shrink: 0;
  }
}

/*! 中心居中 */
.flex-center {
  align-items: center;
  justify-content: center;
}

/*! flex交叉轴居中 */
.flex-a-center {
  align-items: center;
}

/*! flex交叉轴对齐行首 */
.flex-a-start {
  align-items: flex-start;
}

/*! flex交叉轴对齐行尾 */
.flex-a-end {
  align-items: flex-end;
}

/*! flex主轴对齐行首 */
.flex-j-start {
  justify-content: start;
}

/*! flex主轴居中 */
.flex-j-center {
  justify-content: center;
}

/*! flex主轴两端对齐 */
.flex-j-between {
  justify-content: space-between;
}

/*! flex主轴等外边距 */
.flex-j-around {
  justify-content: space-around;
}

/*! flex主轴等间距 */
.flex-j-evenly {
  justify-content: space-evenly;
}

/*! 子元素单独居中 */
.flex-item-center {
  align-self: center;
}

/*! flex允许换行 */
.flex-wrap {
  flex-wrap: wrap;
  align-content: flex-start;
}

/*! 流式布局 */
.flow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/*! 长宽填满 */
.match-parent {
  width: 100%;
  height: 100%;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

/*! 超长文本省略号 */
.ellipsis {
  /* 超出父元素文字显示省略号 */
  text-overflow: ellipsis;
  overflow: hidden;

  /* 禁止文本换行 */
  white-space: nowrap;
}

/*! 多行文本省略 */
.ellipsis-multi {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*! flex填充剩余空间 */
.spacer {
  flex-basis: 0;
  /*禁止压缩其他组件空间*/
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
}

.nice-scroll {
  overflow: overlay;

  &::-webkit-scrollbar {
    width: 16px;
    height: 16px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #dddddd88;
    border-radius: 10px;
    border: 4px solid transparent;
    background-clip: padding-box;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #cccccc88;
  }

  // &::-webkit-scrollbar-track {
  //   // background-color: red;
  //   margin: 32px 0;
  //   margin-right: 32px;
  // }
}